<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页小组内容推荐管理</title>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<style type="text/css">
.sortSpan{
	border: solid 1px;
	width: 50px;
	height: 30px;
	line-height: 30px;
	display: inline-block;
	text-align: center;
}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div data-th-replace="~{layout :: header}"></div>
		<div class="layui-body" style="left: 10px;top:10px">
			<!-- 内容主体区域 -->
			<div>
				<form id="searchFrom" class="layui-form layui-form-pane"
					th:action="@{/group_content/list}" method="post">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">状态</label>
							<div class="layui-input-inline">
								<select name="state">
									<option value="-1" th:selected="${state==-1}">全部状态</option>
									<option value="0" th:selected="${state==0}">已推荐</option>
									<option value="1" th:selected="${state==1}">未推荐</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">内容分类</label>
							<div class="layui-input-inline">
								<select name="contentType">
									<option value="-1" th:selected="${contentType==-1}">全部分类</option>
									<option th:value="${item.classifyId}" th:selected="${contentType} eq ${item.classifyId}" th:each="item:${contentTypes}">[[${item.name}]]</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">话题标题</label>
							<div class="layui-input-inline">
								<input name="title" placeholder="话题标题" class="layui-input"
									th:value="${title != null ? title : ''}" maxlength="30">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">发布人</label>
							<div class="layui-input-inline">
								<input name="createName" placeholder="发布人" class="layui-input"
									th:value="${createName != null ? createName : ''}" maxlength="30">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">操作人</label>
							<div class="layui-input-inline">
								<input name="operator" placeholder="操作人" class="layui-input"
									th:value="${operator != null ? operator : ''}" maxlength="30">
							</div>
						</div>
						<button type="submit" class="layui-btn">搜索</button>
					</div>
				</form>
			</div>
			<table class="layui-table">
				<colgroup>
					<col width="80">
					<col width="100">
					<col width="80">
					<col width="300">
				</colgroup>
				<thead>
					<tr>
						<th><b>顺序号</b></th>
						<th><b>置顶</b></th>
						<th><b>ID</b></th>
						<th><b>标题</b></th>
						<th><b>内容分类</b></th>
						<th><b>排序</b></th>
						<th><b>状态</b></th>
						<th><b>发布人</b></th>
						<th><b>发布时间</b></th>
						<th><b>操作人</b></th>
						<th><b>操作时间</b></th>
						<th><b>操作</b></th>
					</tr>
				</thead>
				<tbody>
					<tr data-th-each="item, iterStat : ${datas}">
						<td data-th-text="${iterStat.count}+${pageIndex-1}*${pageSize}"></td>
						<td>
							<!-- 置顶状态 1-已置顶，0-未置顶 -->
							<div th:if="${item.topStatus == 0}"
								class="layui-unselect layui-form-switch"
								th:onclick="'javascript:updateTopStatus('+${item.id}+',1);'">
								<em>关</em><i></i>
							</div>
							<div th:if="${item.topStatus == 1}"
								class="layui-unselect layui-form-switch layui-form-onswitch"
								th:onclick="'javascript:updateTopStatus('+${item.id}+',0);'">
								<em>开</em><i></i>
							</div>
						</td>
						<td data-th-text="${item.id}"></td>
						<td data-th-text="${item.title}"></td>
						<td>
							<span th:each="contentType:${contentTypes}" th:if="${contentType.classifyId.equals(item.classify_id)}">[[${contentType.name}]]</span>
						</td>
						<td 
							th:onclick="'javascript:showView(\'/group_content/update_sort?id=' + ${item.id} + '\',' + ${item.sort} + ');'"
							data-th-text="${item.sort}"></td>
						<td>
							<span th:if="${item.isRecommend == 1}">已推荐</span> 
							<span th:if="${item.isRecommend == 0}">未推荐</span> 
						</td>
						<td data-th-text="${item.userName}"></td>
						<td data-th-text="${item.createTime}" class="date"></td>
						<td data-th-text="${item.operator}"></td>
						<td data-th-text="${item.updateTime}" class="date"></td>
						<td>
							<a class="layui-btn layui-btn-xs"
								th:onclick="'javascript:edit(' + ${item.id} + ');'">编辑</a> 
							
							<a th:if="${item.isRecommend == 1}"
								class="layui-btn layui-btn-xs layui-btn-warm"
								th:onclick="'javascript:updateRecommend(0,' + ${item.id} + ');'">取消推荐</a>
							
							<a th:if="${item.isRecommend == 0}" class="layui-btn layui-btn-xs"
								th:onclick="'javascript:updateRecommend(1,' + ${item.id} + ');'">推荐</a>
						</td>
					</tr>
				</tbody>
			</table>

			<div id="pageContent"></div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->

		</div>
	</div>
	<!-- <script src="/layui/jquery.min.js"></script>
<script src="/layui/layui.js"></script> -->
	<script>
//JavaScript代码区域
layui.use('laypage', function(){
  var laypage = layui.laypage;
  //执行一个laypage实例
  laypage.render({
	  elem: 'pageContent'
	  ,count:[[${total}]] //数据总数，从服务端得到
	  ,curr: [[${pageIndex}]]	
	  ,layout:['count','prev', 'page', 'next','skip']
	  ,jump: function(obj, first){
		  console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
		  console.log(obj.limit); //得到每页显示的条数
	    //首次不执行
	   if(!first || [[${pageIndex}]] != obj.curr){
	      window.location.href = '/group_content/list?pageIndex=' + obj.curr + "&pageSize=" + obj.limit + 
	      "&" + $("#searchFrom").serialize();
	    } 
	  }
	}); 
});
/**
 * 修改默认状态
 */
function updateTopStatus(dataid,topStatus){
	var msg = "你确定要修改该置顶状态吗？";
	var isTopData = [[${isTopData}]];
	if(topStatus == 1 && isTopData == 1){
		msg = "最多只能置顶1条内容，之前的置顶内容将被取消置顶？";
	}
	layer.confirm(msg,function(index) {
		$.ajax({
			type : "POST",
			data : {'id':dataid,'topStatus':topStatus},
			url : "/group_content/top_status",
			dataType : "json",
			success : function(msg) {
				console.log(msg);
				if (msg.meta.code == 0) {
					layer.msg("操作成功!");
					window.location.reload();
				} else {
					layer.msg(msg.meta.message);
				}
			}
		});
	});
}
function edit(dateId){
	layer.open({
		type: 2,
		resize:false,
		title: "编辑小组内容",
		area: ['90%',"90%"],
		content: "/group_content/edit_view?id=" + dateId, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		btn:['保存','取消'],
		yes:function(index){
			save(index);
		},
		cancel:function(){}
	});
}
/**
 * 保存编辑
 */
function save(index){
	layer.confirm('确定要修改该数据吗?',function(index2) {
		var obj = $("iframe").contents().find("#addForm").serialize();
		$.ajax({
			type : "POST",
			data : obj,
			url : "/group_content/edit",
			dataType : "json",
			success : function(msg) {
				console.log(msg);
				if (msg.meta.code == 0) {
					layer.msg("添加成功!");
					layer.close(index);
					layer.close(index2);
					window.location.reload();
				} else {
					layer.msg(msg.meta.message);
				}
			}
		});
	});
}
/**
 * 更新操作
 */
function updateRecommend(recommendStatus,dateId){
	var msg = "你确定要";
	if(recommendStatus == 0){
		msg = msg + "修改为推荐状态吗？";
	}else if(recommendStatus == 1){
		msg = msg + "取消推荐吗？";
	}
	layer.confirm(msg,function(index) {
		$.ajax({
			type : "POST",
			data : {"id":dateId,"recommendStatus":recommendStatus},
			url : "/group_content/update_recommend",
			dataType : "json",
			success : function(msg) {
				console.log(msg);
				if (msg.meta.code == 0) {
					layer.msg("操作成功!");
					layer.close(index);
					window.location.reload();
				} else {
					layer.msg(msg.meta.message);
				}
			}
		});
	});
}
</script>
<div th:include="footer::update_sort"></div>
</body>
<script type="text/javascript" th:src="@{/common.js}"></script>
</html>